<template>
  <div class="detail-shop-info" v-if="Object.keys(shopInfo).length">
    <!-- logo -->
    <div class="shopinfo-logo">
      <img :src="shopInfo.logo" alt="" />
      <span>{{ shopInfo.name }}</span>
    </div>

    <!-- 成绩和基本描述 -->
    <div class="scroe-appraise">
      <!-- 左 -->
      <div class="left">
        <div class="lf-item1">
          <span class="bold"
            ><i>{{ shopInfo.sells | salesCountFilter }}</i
            ></span
          >
          <span>总销量</span>
        </div>

        <div class="lf-item2 line">
          <span
            ><i>{{ shopInfo.goodsCount }}</i></span
          >
          <span>全部宝贝</span>
        </div>
      </div>
      <!-- 右 -->
      <div class="right">
        <div v-for="(t, idx) in shopInfo.score" :key="idx">
          <span>{{ t.name }}</span>
          <span
            class="span-center"
            :class="{ 'span-better-more': t.isBetter }"
            >{{ t.score }}</span
          >
          <span
            class="span-bottom"
            :class="{ 'span-bottom-more': t.isBetter }"
            >{{ t.isBetter ? "高" : "低" }}</span
          >
        </div>
      </div>
    </div>

    <!-- 进店按钮 -->
    <div class="goShop">
      <span>进店逛逛</span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    shopInfo: {
      type: Object,
      default () {
        return {}
      }
    }
  },
  data () {
    return {}
  },
  methods: {
    // imgLoad () {
    //   this.$emit('shopImgLoad')
    // }
  },
  computed: {
    // 计算属性方式
    // salesCount () {
    //   if (this.shopInfo.sells < 10000) return this.shopInfo.sells
    //   return (this.shopInfo.sells / 10000).toFixed(1)
    // }
  },
  // 还可以用过滤器方式, 推荐过滤器
  filters: {
    salesCountFilter (val) {
      if (val < 10000) return val
      return (val / 10000).toFixed(1) + '万'
    }
  },
  components: {}
}
</script>

<style lang="less" scoped>
.detail-shop-info {
  padding: 0 10px;

  .shopinfo-logo {
    margin: 20px 0;

    img {
      width: 80px;
      height: 80x;
      border: 1px solid #e6e6e6;
      border-radius: 50%;
      vertical-align: middle;
    }

    span {
      margin-left: 10px;
      color: #808080;
      font-size: 18px;
    }
  }

  // 成绩和评价模块布局
  .scroe-appraise {
    display: flex;
    justify-content: space-around;
    height: 100px;
    margin: 20px 0;
    color: #000;
    font-size: 14px;

    // 左
    .left {
      flex: 1;
      display: flex;
      padding-left: 20px;
      align-items: center;
      text-align: center;

      .lf-item1,
      .lf-item2 {
        display: flex;
        flex-direction: column;

        i {
          font-weight: 700;
        }
      }

      .lf-item2 {
        padding: 5px 15px 5px 0;
        border-right: 1px solid #e0e0e0;
      }

      span {
        margin: 5px 10px;
      }
    }

    // TODO: 右
    .right {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      > div {
        display: flex;
        margin: 8px 0;
      }

      .span-center {
        display: inline-block;
        width: 10px;
        margin: 0 40px 0 18px;
        color: #5ea732;
        font-weight: bold;
      }

      .span-bottom {
        color: #fff;
        background-color: #5ea732;
      }

      .span-bottom-more {
        background-color: #f13e3a;
      }

      .span-better-more {
        color: #f13e3a;
      }
    }
  }

  .goShop {
    display: flex;
    justify-content: center;
    color: #7f8287;
    margin-bottom: 20px;

    span {
      padding: 10px 50px;
      background-color: #dfe2e7;
      border-radius: 10px;
    }
  }
}
</style>
